﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
      #citationInfo{
        position:absolute; 
        color:black;
        font-weight:bold;
        font-size:12pt;
        left:10px;
        bottom:10px;
        z-Index:999;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
        dojo.require("esri.map");
        dojo.require("esri.layers.wmts");
        dojo.require("esri.dijit.Scalebar");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");

        function init() {
            esri.config.defaults.io.proxyUrl = "proxy.ashx";

            var bounds = new esri.geometry.Extent({
                "xmin": 115.5, "ymin": 39.5, "xmax": 117.5, "ymax": 41.0,
                "spatialReference": { "wkid": 4326 }
            });
            var map = new esri.Map("map", {
                extent: bounds
            });

            var layerInfo = new esri.layers.WMTSLayerInfo({
                identifier: "BJMap",
                tileMatrixSet: "CustomCRS4326ScaleBJMap",
                format: "png"
            });
            var options = {
                serviceMode: "KVP",
                layerInfo: layerInfo
            };
            var wmtsLayer = new esri.layers.WMTSLayer("http://www.bjmap.gov.cn/services/ogc/wmts/12", options);
            map.addLayer(wmtsLayer);
        }

        dojo.ready(init);
    </script>
</head>
<body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">

      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'" >         
      </div>

    </div>
  </body>
</html>
